<template>
  <div class="pageBox">
    <head-component title="登录" :back="false"></head-component>
    <div class="main">
      <img class="caisetiao_icn" src="@/image/login/caisetiao_icn.png" alt="" />
      <div class="iptBox">
        <div class="iptTitle">手机号</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="from.mobile"
            placeholder="请输入手机号"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">密码</div>
        <div class="iptItem flex-between">
          <input
            type="password"
            class="ipt"
            v-model="from.password"
            placeholder="请输入密码"
          />
        </div>
      </div>

      <div class="pass flex-between">
        <van-checkbox v-model="checked">
          记住密码
          <template #icon="props">
            <img
              class="img-icon"
              :src="props.checked ? activeIcon : inactiveIcon"
            />
          </template>
        </van-checkbox>
        <button class="forget" @click="$router.push('/forget')">忘记密码？</button>
      </div>

      <button class="subBtn">登录</button>

      <div class="noAccount flex-center">
        <p>没有账号，</p>
        <button @click="$router.push('/register')">立即注册</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const checked = ref(true);
    const activeIcon = require("../../image/login/gouxuan_btn.png");
    const inactiveIcon = require("../../image/login/gouxuan_btn2.png");

    const from = reactive({
      mobile: "",
      password: "",
    });
    return {
      from,
      checked,
      activeIcon,
      inactiveIcon,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 88px 30px 0;
  .main {
    margin-top: 61px;
    background-color: #fff;
    background: #ffffff;
    box-shadow: 0px 6px 18px 0px rgba(230, 230, 230, 0.5);
    border-radius: 20px;
    position: relative;
    padding: 10px 40px 75px;

    .caisetiao_icn {
      width: 100%;
      height: 10px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .iptBox {
      border-bottom: 1px solid #dce2f5;
      padding-bottom: 13px;
      margin-top: 60px;
      .iptTitle {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
      }
      .iptItem {
        margin-top: 15px;
        .ipt {
          background-color: transparent;
          border: none;
          color: #333;
          font-size: 28px;
          font-weight: 400;
        }
      }
    }
    .pass {
      margin-top: 23px;
      .img-icon {
        width: 30px;
        height: 30px;
      }
      :deep(.van-checkbox__label) {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
      .forget {
        font-size: 26px;
        font-weight: 400;
        background: transparent;
        border: none;
        color: #999999;
      }
    }
    .subBtn {
      font-size: 32px;
      font-weight: 500;
      color: #ffffff;
      width: 100%;
      height: 88px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      box-shadow: 0px 8px 20px 0px rgba(204, 58, 70, 0.4);
      border-radius: 16px;
      border: none;
      margin-top: 105px;
    }
    .noAccount {
      margin-top: 50px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #afb0b3;
      }
      button {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
        background: transparent;
        border: none;
      }
    }
  }
}
</style>